<template>
  <div class="login-page">
    <!-- 背景 -->
    <div class="background"></div>

    <!-- 登录框 -->
    <div class="login-box">
      <div class="login-header">
        <h2>管理员登录</h2>
      </div>
      <el-form :model="accountForm" :rules="accountRules" ref="accountForm" class="login-form">
        <el-form-item prop="managerPhone">
          <el-input
            v-model="accountForm.managerPhone"
            placeholder="请输入账号"
            prefix-icon="el-icon-user"
          />
        </el-form-item>
        <el-form-item prop="managerPass">
          <el-input
            v-model="accountForm.managerPass"
            type="password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
          />
        </el-form-item>
        <el-button
          type="primary"
          class="login-button"
          @click="submitAccountForm"
          :loading="loading"
        >
          登录
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: "account", // 默认显示账号密码登录
      accountForm: {
        managerPhone: "",
        managerPass: "",
      },
      sendingCode: false, // 是否在发送验证码
      countdown: 60, // 验证码倒计时
      timer: null, // 定时器
      accountRules: {
        managerPhone: [{ required: true, message: "请输入账号", trigger: "blur" }],
        managerPass: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
      submitAccountForm() {
        this.$refs.accountForm.validate((valid) => {
        if (valid) {
          // 在这里调用后端接口
          this.$http.post("/manager/manager/managerLogin", this.accountForm)
          .then((response) => {
            if (response.data.success) {
              this.$message.success("登录成功！");
                  // 保存用户信息或跳转页面
               localStorage.setItem("token", response.headers.token);
                this.$router.push("/managerhome"); // 示例：跳转到主页面
            } else {
              this.$message.error(response.data.message || "登录失败！");
            }
          })
          .catch((error) => {
            console.error(error);
            this.$message.error("登录请求失败，请稍后重试！");
          });
        } else {
          this.$message.error("请填写完整表单！");
        }
      });
    },
  destroyed() {
    if (this.timer) clearInterval(this.timer);
  },
}
}
</script>

<style scoped>
/* 页面布局 */
.login-page {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-family: "Arial", sans-serif;
}

/* 背景层 */
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:  no-repeat center center / cover;
z-index: -1;
}


/* 登录框样式 */
.login-box {
width: 350px;
height: 400px;
padding: 20px;
border-radius: 30px;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
/*text-align: center;*/
transition: all 0.3s ease;
}

/* Tab 样式 */
.login-tabs {
margin-top: 30px;


}

/* 提交按钮 */
.submit-button {
width: 100%;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #fff;
border: none;
font-weight: bold;
border-radius: 10px;
transition: all 0.3s ease;
}

.submit-button:hover {
background: linear-gradient(135deg, #2575fc, #6a11cb);
}


.qq-login-button:hover {
background: #2d4373;
}
</style>
